<!--用户分配权限-->
<template>
  <side-box :show="sideBoxVisiable" title="用户权限分配" @close="sideBoxVisiable=!sideBoxVisiable">
    <template slot="body">
      <div id="userPermission" class="app-container  flex-main">
        <div class="conmmon-container-main">
          <!--搜索条件-->
          <div class="filter-container">
            <div style="font-size: 14px;">
              <span class="color-primary">{{ listQuery.userName }}</span>
              &nbsp;拥有&nbsp;
              <span class="color-primary">{{ defaultCheckedKeys.length }}</span>&nbsp;个权限
            </div>
          </div>
          <div class="table-container flex-main">
            <el-tree
              v-if="isMergeTable"
              ref="menuTree"
              class="common-el-tree"
              :data="permissionData"
              show-checkbox
              :check-strictly="false"
              node-key="id"
              :default-checked-keys="[]"
              :expand-on-click-node="false"
              :default-expand-all="expandAll"
              :props="{children: 'permissionVos',label: 'name'}">
              <span slot-scope="{ node }" class="custom-tree-node">
                <span class="text">
                  {{ node.label }}&nbsp;
                  <span class="color-primary">&nbsp;({{ node.data.permissionValue }})</span>
                </span>
                <span style="padding-right:10px">
                  <button-option v-if="node.checked" skin="danger" title="减权限" @click="handleReducePermission(node.data)">减权限</button-option>
                  <button-option v-else skin="primary" title="加权限" @click="handleAddPermission(node.data)">加权限</button-option>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
    </template>
  </side-box>

</template>

<script>

export default {
  components: { },
  props: {
  },
  data() {
    return {
      sideBoxVisiable: false,
      isMergeTable: true,
      expandAll: true,
      permissionData: [],
      defaultCheckedKeys: [],
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT
      },
      multipleSelectionRecords: []
    }
  },
  mouted() {},
  created() {
  },
  methods: {
    config(data) {
      this.sideBoxVisiable = true
      this.listQuery.userId = data.id
      this.listQuery.userName = `${data.realName} (${data.userName})`
      this.permissionData = []
      this.fetchPermissionuTreeTable()
    },
    handleMerge() {
      this.isMergeTable = false
      this.expandAll = false
      this.$nextTick(() => {
        this.isMergeTable = true
      })
    },
    handleExpand() {
      this.isMergeTable = false
      this.expandAll = true
      this.$nextTick(() => {
        this.isMergeTable = true
      })
    },

    async fetchPermissionuTreeTable() {
      const permissions = await this.$store.dispatch('permissionTreeTable', { 'sort': '+orders' })
      this.permissionData = permissions
      this.setDisabled(this.permissionData)
      const response = await this.$store.dispatch('getPermissionByUserId', this.listQuery.userId)
      this.defaultCheckedKeys = []
      response.forEach(item => {
        this.defaultCheckedKeys.push(item.id)
      })
      this.$refs.menuTree.setCheckedKeys(this.defaultCheckedKeys)
    },
    setDisabled(treeData) {
      treeData.forEach((item) => {
        this.$set(item, 'disabled', true)
        if (item.permissionVos) {
          this.setDisabled(item.permissionVos)
        }
      })
    },
    // 加权限
    handleAddPermission(row) {
      // const permissionIdList = [row.id]
      this.msgSuccess('待接入！')

      /* this.$store.dispatch('userPermissionSave', { userId: this.listQuery.userId, permissionIdList: permissionIdList }).then(response => {
        this.msgSuccess('权限分配成功')
      })*/
    },

    // 减权限
    handleReducePermission(row) {
      // const permissionIdList = [row.id]
      this.msgSuccess('待接入！')
      /* this.$store.dispatch('userPermissionRemove', { userId: this.listQuery.userId, permissionIdList: permissionIdList }).then(response => {
        this.msgSuccess('权限取消成功')
      })*/
    }

  }
}
</script>

<style lang="scss" >
  #userPermission{
    .el-tabs__content{
      height: 0px !important;
      padding: 0px !important;
    }
    .el-tabs--border-card{
      border: 0px;
    }
  }
</style>
